<template>
  <div class="box-con">
    <div class="top">
      <div class="t-list">
        <div
          class="l-item animate__animated animate__bounce"
          v-for="(item, index) in titleList"
        >
          <div class="sta-li">
            <img src="@/assets/bigScreen/costa-bg.png" alt="" />
            <div class="sta-li-r">
              <div class="text">{{ item.name }}</div>
              <div class="count">
                <!-- :endVal="Math.max(0, Number(item.value))" -->
                <CountTo
                  :startVal="0"
                  :endVal="Number(item.value)"
                  :separator="false"
                  :duration="2000"
                />
                <span>{{ item.unit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="c-left">
        <div class="c-l-top">
          <div class="title-item animate__animated animate__fadeInUp">
            各区检查进度
          </div>
          <div class="content1 animate__animated animate__fadeInUp">
            <left1
              :key="currentIndex"
              :xData="gqjcjdxData"
              :sData="gqjcjdSData"
              :legendText="['检查率排行']"
            ></left1>
          </div>
        </div>
        <div class="c-l-bottom">
          <div class="title-item animate__animated animate__fadeInUp">
            各区检查隐患占比
          </div>
          <div class="content1 animate__animated animate__fadeInUp">
            <center2 :key="currentIndex" :data="gjyhzbData"></center2>
          </div>
        </div>
      </div>
      <div class="c-center">
        <div class="c-c-top">
          <div class="title-item animate__animated animate__fadeInUp">
            检查发现隐患
          </div>
          <div class="content1 animate__animated animate__fadeInUp">
            <!-- style="padding: 10px 0 0 20px" -->
            <right1
              :key="currentIndex"
              :data1="yhfxData"
              :data2="yhzgData"
              :xData="jcfxsData"
              :legendText="['隐患发现数量', '隐患整改数量']"
            ></right1>
          </div>
        </div>
        <div class="c-c-bottom">
          <div class="title-item animate__animated animate__fadeInUp">
            隐患七项占比
          </div>
          <div class="content1 animate__animated animate__fadeInUp">
            <right2 :key="currentIndex" :data="yhqxzbData"></right2>
          </div>
        </div>
      </div>
      <div class="c-right">
        <div class="c-r-top">
          <div class="title-item animate__animated animate__fadeInUp">
            电动自行车检查情况
          </div>
          <div class="content1 animate__animated animate__fadeInUp">
            <!-- style="padding: 10px 0 0 20px" -->
            <right1
              :key="currentIndex"
              :data1="ddczsData"
              :data2="jcqlzsData"
              :xData="ddcjcData"
              :legendText="['电动自行车总数', '检查清理数量']"
            ></right1>
          </div>
        </div>
        <div class="c-r-bottom">
          <div class="title-item animate__animated animate__fadeInUp">
            城管委统计
          </div>
          <div class="content1 animate__animated animate__fadeInUp">
            <left3
              :key="currentIndex"
              :xData="cgwtjxData"
              :sData="cgwtjsData"
              :legendText="['外卖/闪送/代驾人员分布情况']"
            ></left3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { CountTo } from 'vue3-count-to'
import { useRoute, useRouter } from 'vue-router'

import right1 from '@/Pages/bigScreen/components/dangerCondition/charts/right1.vue'
import left1 from '@/Pages/bigScreen/components/dangerCondition/charts/left1.vue'
import left3 from '@/Pages/bigScreen/components/dangerCondition/charts/left3.vue'
import center2 from '@/Pages/bigScreen/components/dangerCondition/charts/center2.vue'
import right2 from '@/Pages/bigScreen/components/dangerCondition/charts/right2.vue'
import pie from '@/Pages/bigScreen/components/baseInfo/charts/pie.vue'
import url1 from '@/assets/bigScreen/costa-bg.png'
import {
  getCJJCTopList,
  getCJJCGQJJCJD,
  getCJJCJCFXYH,
  getCJJCDDZXCJCQK,
  getCJJCGQJYHZB,
  getCJJCYHQXZB,
  getCJJCCGWTJ,
  // getCJJCYHTJ,
  // getCJJCInfo,
  // getCJJCGJYHZB,
  // getCJJCXZHCInfo,
  // getCJJCYHLY,
} from '@/api/index.js'
const router = useRouter()
const currentIndex = ref(1)
// 1.卡片列表
const titleList = ref([
  // {
  //   name: '房屋总数',
  //   count: 101320,
  //   unit: '栋',
  // },
])
const _getCJJCTopList = async () => {
  let res = await getCJJCTopList()
  titleList.value = res.data.data
  console.log('@titleList.value', titleList.value)
}
// 2.个区级检查进度
const gqjcjdSData = ref([
  12, 34, 66, 77, 89, 55, 34, 55, 22, 14, 55, 89, 55, 89,
])
const gqjcjdxData = ref([
  '朝阳',
  '丰台',
  '石景山',
  '海淀',
  '门头沟',
  '房山',
  '通州',
  '顺义',
  '昌平',
  '大兴',
  '怀柔',
  '平谷',
  '密云',
  '延庆',
])
const _getCJJCGQJJCJD = async () => {
  let res = await getCJJCGQJJCJD()
  let arr = res?.data?.data
  gqjcjdxData.value = arr.map((item) => item.name)
  gqjcjdSData.value = arr.map((item) => item.count)
}

// 3.检查发现隐患
const yhfxData = ref([
  12, 34, 66, 777, 899, 55, 334, 555, 222, 44, 55, 89, 55, 89,
])
const yhzgData = ref([
  121, 314, 66, 77, 99, 525, 334, 55, 22, 414, 551, 89, 55, 89,
])
const jcfxsData = ref([
  '朝阳',
  '丰台',
  '石景山',
  '海淀',
  '门头沟',
  '房山',
  '通州',
  '顺义',
  '昌平',
  '大兴',
  '怀柔',
  '平谷',
  '密云',
  '延庆',
])
const _getCJJCJCFXYH = async () => {
  let res = await getCJJCJCFXYH()
  let arr = res?.data?.data
  jcfxsData.value = arr.map((item) => item.name)
  yhfxData.value = arr.map((item) => item.yhcount)
  yhzgData.value = arr.map((item) => item.zgcount)
}

// 4.电动自行车检查情况
const ddczsData = ref([
  12, 34, 66, 777, 899, 55, 334, 555, 222, 44, 55, 89, 55, 89,
])
const jcqlzsData = ref([
  12, 34, 66, 777, 899, 55, 334, 555, 222, 44, 55, 89, 55, 89,
])
const ddcjcData = ref([
  '朝阳',
  '丰台',
  '石景山',
  '海淀',
  '门头沟',
  '房山',
  '通州',
  '顺义',
  '昌平',
  '大兴',
  '怀柔',
  '平谷',
  '密云',
  '延庆',
])
const _getCJJCDDZXCJCQK = async () => {
  let res = await getCJJCDDZXCJCQK()
  let arr = res?.data?.data
  ddcjcData.value = arr.map((item) => item.name)
  ddczsData.value = arr.map((item) => item.bdfwjzrydddzxcsl)
  jcqlzsData.value = arr.map((item) => item.qlddzxcsl)
}

// 5.各区检查隐患占比
const gjyhzbData = ref([
  // { value: 4.89, name: '朝阳区' },
  // { value: 4.24, name: '丰台区' },
  // { value: 2.96, name: '石景山区' },
  // { value: 2.09, name: '海淀区' },
  // { value: 3.92, name: '门头沟区' },
  // { value: 3.65, name: '房山区' },
  // { value: 4.71, name: '通州区' },
  // { value: 4.91, name: '顺义区' },
  // { value: 6.91, name: '昌平区' },
  // { value: 8.91, name: '大兴区' },
  // { value: 2.91, name: '怀柔区' },
  // { value: 5.91, name: '平谷区' },
  // { value: 7.41, name: '密云区' },
  // { value: 23.9, name: '延庆区' },
])
const _getCJJCGQJYHZB = async () => {
  let res = await getCJJCGQJYHZB()
  let arr = res?.data?.data
  let newArr = arr.map(({ gqyhzb, name }) => ({
    value: +gqyhzb,
    name,
  }))
  gjyhzbData.value = newArr
}
// 6.隐患七项占比
const yhqxzbData = ref([
  {
    name: '无旱1',
    value: '1000',
  },
  {
    name: '轻旱1',
    value: '1000',
  },
  {
    name: '中旱1',
    value: '1000',
  },
  {
    name: '重旱1',
    value: '1000',
  },
  {
    name: '特旱1',
    value: '100',
  },
])
const _getCJJCYHQXZB = async () => {
  let res = await getCJJCYHQXZB()
  let arr = res?.data?.data
  let newArr = arr.map(({ count, name }) => ({
    value: +count,
    name,
  }))
  yhqxzbData.value = newArr
  console.log('@yhqxzbData.value', yhqxzbData.value)
}
// 7.城管委统计
const cgwtjxData = ref([
  // '朝阳',
  // '丰台',
  // '石景山',
  // '海淀',
  // '门头沟',
  // '房山',
  // '通州',
  // '顺义',
  // '昌平',
  // '大兴',
  // '怀柔',
  // '平谷',
  // '密云',
  // '延庆',
])
const cgwtjsData = ref([
  12, 34, 66, 777, 899, 55, 334, 555, 222, 44, 55, 89, 55, 89,
])
const _getCJJCCGWTJ = async () => {
  let res = await getCJJCCGWTJ()
  let arr = res?.data?.data
  cgwtjxData.value = arr.map((item) => item.name)
  cgwtjsData.value = arr.map((item) => item.czryrs)
}

onMounted(() => {
  _getCJJCTopList()
  _getCJJCGQJJCJD()
  _getCJJCJCFXYH()
  _getCJJCDDZXCJCQK()
  _getCJJCGQJYHZB()
  _getCJJCYHQXZB()
  _getCJJCCGWTJ()
})
</script>

<style scoped lang="scss">
.box-con {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .top {
    width: calc(100% - 5rem);
    border: 2px solid #1c336c;
    height: 16%;
    padding: 2rem;
    .t-list {
      display: flex;
      justify-content: space-between;
      height: 100%;
      .l-item {
        width: 10%;
        height: 100%;
        border: 2px solid #1f3874;
        border-radius: 0.6rem;
        box-sizing: border-box;
        @keyframes fadenum {
          100% {
            transform: rotate(360deg);
          }
        }
        .sta-li {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          img {
            width: 6rem;
            height: 6rem;
            animation: fadenum 2s infinite;
          }
          .sta-li-r {
            height: 4rem;
            .text {
              font-size: 0.7vw;
              line-height: 1.7rem;
              color: rgb(255, 255, 255);
              margin-bottom: 1rem;
            }
            .count {
              text-align: right;
              font-size: 1.1vw;
              line-height: 2.2rem;
              color: rgba(255, 255, 255, 0.87);
              font-weight: bold;
            }
          }
        }
      }
    }
  }
  .content {
    width: calc(100% - 4rem);
    height: 77%;
    display: flex;
    justify-content: space-between;
    // border: 1px solid red;
    .c-left {
      width: 32%;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .c-l-top {
        height: 48%;
        border: 2px solid #1c336c;
      }
      .c-l-bottom {
        height: 48%;
        border: 2px solid #1c336c;
      }
    }
    .c-center {
      width: 33%;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .c-c-top {
        height: 48%;
        border: 2px solid #1c336c;
      }
      .c-c-bottom {
        height: 48%;
        border: 2px solid #1c336c;
      }
    }
    .c-right {
      width: 32%;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .c-r-top {
        height: 48%;
        border: 2px solid #1c336c;
      }
      .c-r-bottom {
        height: 48%;
        border: 2px solid #1c336c;
      }
    }
  }
}
.h4s {
  height: 4.5rem;
  line-height: 4.5rem;
  background-image: url('@/assets/bigScreen/title-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem 0.3rem 4.7rem;
  box-sizing: border-box;

  .tit-l {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.6rem;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

    span {
      font-size: 1.4rem;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.62);
      margin-left: 1.8rem;
    }
  }

  .tit-r {
    display: flex;
    align-items: center;
  }
  .more {
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
    cursor: pointer;
  }
}
::v-deep .searchk .ant-picker {
  background-color: inherit;
  border: 0.1rem solid rgba(2, 251, 253, 0.3);
  padding: 0rem 1rem !important;
}
::v-deep .searchk .ant-picker-input > input {
  color: #02fbfd;
}
.title-item {
  height: 4rem;
  line-height: 2rem;
  font-size: 1.5rem;
  padding-left: 1rem;
  // border: 1px solid red;
  background-image: url('@/assets/bigScreen1/title.png');
  background-repeat: no-repeat;
  background-size: 100% 90%;
}
.header {
  height: 4rem;
  // border: 1px solid #1c336c;
  display: flex;
  line-height: 4rem;
  justify-content: space-between;
  .h-item {
    width: 25%;
    border: 1px solid #1c336c;
    display: flex;
    justify-content: space-evenly;
  }
}
.content2 {
  height: calc(100% - 8rem);
  // border: 1px solid red;
}
.content1 {
  height: calc(100% - 4rem);
}
</style>
